<script lang='ts' setup>
import { ArticleInfo, ArticleQuoteInfo } from '@/models/article';
import { articleService } from '@/services/article.service';
import { clipboardWriteText } from '@/utils/common.methods';
import { Message } from '@arco-design/web-vue';
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const item = ref({} as ArticleInfo);
const quote = ref({} as ArticleQuoteInfo)
onMounted(async () => {

  const params = useRoute().params;
  articleService.getOne(params.id as string).then(res => {
    item.value = res;
    if (res.quote) quote.value = res.quotes?.find(val => val.id === res.quote)
  })
})

function onCopy(): void {
  clipboardWriteText(location.href);
  Message.success('链接复制成功');
}

</script>
<template>
  <div class="">
    <Nav />
    <div class="detail" v-if="item.id">
      <div class="top">
        <iframe class="content" v-if="quote?.id" :src="quote.href" scrolling="no" border="0" frameborder="no"
          framespacing="0" allowfullscreen="true"> </iframe>
        <img class="cover" :src="item.cover" alt="" v-else>
      </div>
      <div class="title">{{ item.title }}</div>
      <div class="header flex"> </div>
      <Markdown class="content" :source="item.content" />
      <div class="tags flex">
        <div class="tag" v-for="tag in item.tags">{{ tag }}</div>
      </div>
      <div class="bottom flex">
        <div class="author">
          作者： <span v-for="author  in item.author">{{ author }}</span>
        </div>
        <div class="operate">
          <icon-share-alt class="icon" size="24" @click="onCopy" />
        </div>
      </div>
      <a-space class="quote" wrap v-if="item.quotes?.length">
        <p>外站链接</p>
        <a-link :href="quote.href" icon v-for="quote in item.quotes"> {{ quote.name }} </a-link>
      </a-space>
      <br />
      <a-space class="quote" wrap v-if="item.originals?.length">
        <p>原文链接</p>
        <a-link :href="original.href" icon v-for="original in item.originals"> {{ original.name }} </a-link>
      </a-space>
    </div>
    <a-skeleton class="detail" v-else animation>
      <a-space direction="vertical" :style="{ width: '100%' }" size="large">
        <a-skeleton-line :rows="30" />
      </a-space>
    </a-skeleton>
  </div>
</template>
<style lang='scss' scoped>
.detail {
  width: 100%;
  max-width: 700px;
  margin: 70px auto 20px;
  padding: 10px 20px;

  .top {
    .content {
      width: 100%;
      height: 400px;
    }

    .cover {
      width: 100%;
      object-fit: contain;
    }

  }

  .title {
    word-wrap: break-word;
    font-size: 24px;
    line-height: 1.22;
    margin: 14px 0;
    font-weight: 600;
  }

  .header {
    justify-content: space-between;
  }

  .tags {
    flex-wrap: wrap;

    .tag {
      font-size: 13px;
      height: 33px;
      line-height: 33px;
      margin-bottom: 10px;
      margin-right: 10px;
      overflow: hidden;
      color: rgb(var(--arcoblue-4));
      background: rgb(var(--arcoblue-1));
      padding: 0 16px;
      border-radius: 50px;
    }
  }

  .bottom {
    margin-bottom: 10px;
    justify-content: space-between;
  }

  .operate {
    .icon {
      cursor: pointer;
    }
  }

  .quote {}

  @media screen and (max-width: 1200px) {
    .top {
      .content {
        height: 200px;
      }
    }
  }
}
</style>